<template>
    <div id="rosechart">
        <div id="rose"></div>
        <div id="roseData">
            <el-input type="textarea" :rows="2"  v-model="roseDataS" @change="dataChange">
           </el-input>
           <el-button type="primary" plain @click="Sort">Sort</el-button>
           <div id='config'>
             <div id="innerRadius" class="config">
               <p>innerRadius(%):</p>
               <el-input-number v-model="minRadius" @change="configChange" :step="5"
                :max="maxRadius - 5" :min="0"></el-input-number>
             </div>
             <div id="outerRadius" class="config">
               <p>outerRadius(%):</p>
               <el-input-number v-model="maxRadius" @change="configChange" :step="5"
                :max="100" :min="minRadius + 5"></el-input-number>
             </div>
           </div>
        </div>
    </div>
</template>
<script>
import {RoseChart} from './RoseChart'
export default {
  data () {
    return {
      roseChart: '',
      roseData: [],
      itemsName: [],
      minRadius: 0,
      maxRadius: 100
    }
  },
  created () {
    this.setPieData()
  },
  mounted () {
    this.roseChart = new RoseChart('rose')
    this.roseChart.minRadius = '0%'
    this.roseChart.maxRadius = '100%'
    this.roseChart.itemsName = this.itemsName
    this.roseChart.title = 'PieChart'
    this.roseChart.data = this.roseData
    this.roseChart.draw()
  },
  computed: {
    roseDataS: {
      get: function () {
        return this.roseData.map(d => d.name + ':' + d.value).toString()
      },
      set: function (d) {
        let data = d.split(',')
        this.roseData = []
        for (let i = 0; i < data.length; ++i) {
          this.roseData.push({
            name: data[i].split(':')[0],
            value: parseInt(data[i].split(':')[1])
          })
        }
      }
    }
  },
  methods: {
    setPieData () {
      let num = parseInt(Math.random() * 3 + 6)
      for (let i = 0; i < num; ++i) {
        this.roseData.push({
          name: 'item-' + (i + 1),
          value: parseInt(Math.random() * 25 + 5)
        })
        this.itemsName.push('item-' + (i + 1))
      }
      // this.roseData = [
      //   {value: 10, name: 'rose1'},
      //   {value: 5, name: 'rose2'},
      //   {value: 15, name: 'rose3'},
      //   {value: 25, name: 'rose4'},
      //   {value: 20, name: 'rose5'},
      //   {value: 35, name: 'rose6'},
      //   {value: 30, name: 'rose7'},
      //   {value: 40, name: 'rose8'}
      // ]
    },
    dataChange () {
      this.roseChart.data = this.roseData
      this.itemsName = []
      for (let i = 0; i < this.roseData.length; ++i) {
        this.itemsName.push(this.roseData[i].name)
      }
      this.roseChart.itemsName = this.itemsName
      this.roseChart.update()
    },
    configChange () {
      this.roseChart.minRadius = this.minRadius + '%'
      this.roseChart.maxRadius = this.maxRadius + '%'
      this.roseChart.update()
    },
    Sort () {
      this.roseData.sort((a, b) => {
        return a - b
      })
      this.roseChart.sort()
    }
  }
}
</script>
<style scoped>
#rosechart {
    height: 100%;
    width: 100%;
}
#rose {
    height: 60%;
    width: 100%;
}
#roseData {
    height: 40%;
    width: 100%;
}
.config {
  float: left;
  width: 50%;
}
</style>
